<template>
  <view class="clock-container">
    <view class="clock-title">实时时钟</view>

    <!-- 使用view包裹svg，确保小程序中的尺寸正确 -->
    <view class="clock-wrapper">
      <svg class="clock-svg" viewBox="0 0 200 200" @click="toggleSecondHand">
        <!-- 时钟背景 -->
        <circle cx="100" cy="100" r="90" fill="#ffffff" stroke="#333" stroke-width="2" />

        <!-- 时钟刻度 - 小时刻度和数字 -->
        <view v-for="(hour, index) in 12" :key="index">
          <!-- 小时刻度线使用SVG绘制 -->
          <line :x1="100 + 80 * Math.sin(hour * Math.PI / 6)" :y1="100 - 80 * Math.cos(hour * Math.PI / 6)"
            :x2="100 + 65 * Math.sin(hour * Math.PI / 6)" :y2="100 - 65 * Math.cos(hour * Math.PI / 6)" stroke="#333"
            stroke-width="3" />

          <!-- 小时数字在小程序中使用定位的view代替svg text，解决显示问题 -->
          <view class="hour-text" :style="{
              left: `${100 + 70 * Math.sin(hour * Math.PI / 6)}rpx`,
              top: `${100 - 70 * Math.cos(hour * Math.PI / 6)}rpx`,
              transform: 'translate(-50%, 50%)'
            }">
            {{ hour }}
          </view>
        </view>

        <!-- 时钟刻度 - 分钟刻度 -->
        <line v-for="(minute, index) in 60" :key="index + 12" v-if="minute % 5 !== 0"
          :x1="100 + 80 * Math.sin(minute * Math.PI / 30)" :y1="100 - 80 * Math.cos(minute * Math.PI / 30)"
          :x2="100 + 75 * Math.sin(minute * Math.PI / 30)" :y2="100 - 75 * Math.cos(minute * Math.PI / 30)"
          stroke="#999" stroke-width="1" />

        <!-- 时针 -->
        <line x1="100" y1="100" :x2="100 + 40 * Math.sin(hoursAngle)" :y2="100 - 40 * Math.cos(hoursAngle)"
          stroke="#333" stroke-width="4" stroke-linecap="round" />

        <!-- 分针 -->
        <line x1="100" y1="100" :x2="100 + 60 * Math.sin(minutesAngle)" :y2="100 - 60 * Math.cos(minutesAngle)"
          stroke="#666" stroke-width="3" stroke-linecap="round" />

        <!-- 秒针 -->
        <line v-if="showSecondHand" x1="100" y1="100" :x2="100 + 70 * Math.sin(secondsAngle)"
          :y2="100 - 70 * Math.cos(secondsAngle)" stroke="#ff3333" stroke-width="1.5" stroke-linecap="round" />

        <!-- 中心点 -->
        <circle cx="100" cy="100" r="4" fill="#333" />
      </svg>
    </view>

    <view class="time-display">{{ currentTimeText }}</view>
    <view class="clock-hint">点击时钟可切换是否显示秒针</view>
  </view>
</template>

<script setup>
  import {
    ref,
    computed,
    onMounted,
    onUnmounted
  } from 'vue';

  // 控制是否显示秒针
  const showSecondHand = ref(true);

  // 当前时间
  const currentTime = ref(new Date());

  // 格式化显示时间文本
  const currentTimeText = computed(() => {
    const hours = String(currentTime.value.getHours()).padStart(2, '0');
    const minutes = String(currentTime.value.getMinutes()).padStart(2, '0');
    const seconds = String(currentTime.value.getSeconds()).padStart(2, '0');
    return `${hours}:${minutes}:${seconds}`;
  });

  // 计算时针角度 (弧度)
  const hoursAngle = computed(() => {
    const hours = currentTime.value.getHours() % 12;
    const minutes = currentTime.value.getMinutes();
    return (hours * 60 + minutes) * Math.PI / 360;
  });

  // 计算分针角度 (弧度)
  const minutesAngle = computed(() => {
    return currentTime.value.getMinutes() * Math.PI / 30;
  });

  // 计算秒针角度 (弧度)
  const secondsAngle = computed(() => {
    return currentTime.value.getSeconds() * Math.PI / 30;
  });

  // 切换秒针显示状态
  const toggleSecondHand = () => {
    showSecondHand.value = !showSecondHand.value;
  };

  // 定时器ID
  let timerId = null;

  // 组件挂载时启动定时器
  onMounted(() => {
    // 初始更新一次
    currentTime.value = new Date();

    // 小程序中使用setInterval需要注意性能，这里优化为更稳定的实现
    timerId = setInterval(() => {
      currentTime.value = new Date();
    }, 1000);
  });

  // 组件卸载时清除定时器
  onUnmounted(() => {
    if (timerId) {
      clearInterval(timerId);
      timerId = null;
    }
  });
</script>

<style scoped>
  .clock-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30rpx;
    background-color: #f5f5f5;
    min-height: 100vh;
    box-sizing: border-box;
  }

  .clock-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30rpx;
  }

  /* 包裹层解决小程序SVG尺寸问题 */
  .clock-wrapper {
    width: 60vw;
    max-width: 600rpx;
    height: 60vw;
    max-height: 600rpx;
    position: relative;
  }

  .clock-svg {
    width: 100%;
    height: 100%;
    background-color: #f9f9f9;
    border-radius: 50%;
    box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.1);
    cursor: pointer;
    display: block;
    /* 解决点击区域问题 */
  }

  /* 小时数字样式 - 使用绝对定位解决小程序svg text不显示问题 */
  .hour-text {
    position: absolute;
    font-size: 24rpx;
    color: #333;
    transform-origin: center;
  }

  .time-display {
    margin-top: 30rpx;
    font-size: 32rpx;
    font-family: monospace;
    color: #333;
  }

  .clock-hint {
    margin-top: 15rpx;
    font-size: 24rpx;
    color: #666;
    text-align: center;
  }
</style>